<template>
  <div>
    <button @click="timeStart()">点击</button>
    <button @click="stop">暂停</button>
    <button @click="reset">重置</button>
    <button @click="timeStart">继续</button>
    <h1>{{ str }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hour: 0,
      minute: 0,
      ms: 0,
      second: 0,
      time: '',
      str: '',
      data: {
        name: 10,
        age: 20
      }
    }
  },
  methods: {
    timeStart() {
      this.time = setInterval(this.timer, 50)
    },
    timer() {
      this.ms = this.ms + 50
      if (this.ms >= 1000) {
        this.ms = 0
        this.second = this.second + 1
      }
      if (this.second >= 60) {
        this.second = 0
        this.minute = this.minute + 1
      }
      if (this.minute >= 60) {
        this.minute = 0
        this.hour = this.hour + 1
      }
      this.str = this.toDub(this.hour) + ':' + this.toDub(this.minute) + ':' + this.toDub(this.second)
    },
    toDub(n) {
      if (n < 10) {
        return '0' + n
      } else {
        return '' + n
      }
    },
    stop() {
      console.log('暂停')
      clearInterval(this.time)
    },
    reset() {
      clearInterval(this.time)
      this.hour = 0
      this.minute = 0
      this.ms = 0
      this.second = 0
      this.str = '00:00:00'
    }
  }
}
</script>

<style scoped>

</style>
